<template>
    <div class="sf-schema">
        <div class="nav">
            <router-link to="/drag">在线演示</router-link>
        </div>
        <div>
            <div class="title">
                <h2>schema JSON 结构</h2>
                <div class="title-option">
                    <el-button size="mini" @click="isHide = !isHide">
                        <i v-if="isHide" class="el-icon-arrow-up"></i>
                        <i v-else class="el-icon-arrow-down"></i>
                    </el-button>
                </div>
            </div>
            <el-collapse-transition>
                <div v-show="!isHide">
                    <Vue2AceEditor ref="editor" v-model="content" @init="editorInit" v-bind="editorConfig"></Vue2AceEditor>
                </div>
            </el-collapse-transition>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import Vue2AceEditor from 'vue2-ace-editor'
import CodeTpl from '@/packages/md/form.md'

export default {
    components: {
        Vue2AceEditor,
        CodeTpl
    },
    data() {
        return {
            isHide: false,
            editorConfig: {
                lang: 'json',
                theme: 'chrome',
                height: 600
            },
            content: '',
            schema: {
                // properties: {
                //     [model]: {
                //         ...
                //     }
                // },
                // or
                properties: [
                    {
                        model: 'xxx',
                        label: '表单名称',
                        labelWidth: 100,
                        required: false,
                        rules: [{
                            required: true,
                            message: '错误提示',
                            type: 'string',
                            pattern: '',
                            trigger: ['change', 'blur']
                        }],
                        error: null,
                        showMessage: true,
                        inlineMessage: false,
                        size: 'small',
                        hidden: false,
                        ui: {
                            size: 'small',
                            disabled: false,
                            textColor: '#0094ff',
                            fill: '#0094ff',
                            border: false,
                            value: true,
                            name: '',
                            trueLabel: true,
                            falseLabel: false,
                            checked: false,
                            indeterminate: false,
                            type: 'text',
                            maxlength: 100,
                            minlength: 20,
                            showWordLimit: false,
                            placeholder: '占位符',
                            clearable: false,
                            showPassword: false,
                            prefixIcon: 'el-icon-xxx',
                            suffixIcon: 'el-icon-xxx',
                            rows: 2,
                            autosize: { minRows: 2, maxRows: 6 },
                            autocomplete: 'on',
                            readonly: false,
                            max: 20,
                            min: 0,
                            step: 10,
                            resize: 'none',
                            autofocus: false,
                            form: '',
                            label: '',
                            tabindex: '',
                            validateEvent: true,
                            valueKey: 'value',
                            stepStrictly: false,
                            precision: 2,
                            controls: false,
                            controlsPosition: 'right',
                            debounce: 300,
                            placement: 'bottom-start',
                            popperClass: '',
                            triggerOnFocus: true,
                            selectWhenUnmatched: false,
                            hideLoading: false,
                            popperAppendToBody: true,
                            highlightFirstItem: false,
                            multiple: false,
                            collapseTags: false,
                            multipleLimit: 0,
                            filterable: false,
                            allowCreate: false,
                            remote: false,
                            loading: false,
                            loadingText: '加载',
                            noMatchText: '无匹配类容',
                            noDataText: '无数据',
                            reserveKeyword: false,
                            defaultFirstOption: false,
                            automaticDropdown: false,
                            props: {},
                            showAllLevels: false,
                            separator: '-',
                            width: 40,
                            activeIconClass: '',
                            inactiveIconClass: '',
                            activeText: '',
                            activeValue: '',
                            inactiveValue: '',
                            activeColor: '',
                            inactiveColor: '',
                            showInput: false,
                            showInputControls: false,
                            inputSize: 'small',
                            showStops: false,
                            showTooltip: false,
                            range: false,
                            vertical: false,
                            height: '100px',
                            tooltipClass: '',
                            marks: {},
                            editable: false,
                            startPlaceholder: '开始日期',
                            endPlaceholder: '结束日期',
                            isRange: false,
                            arrowControl: false,
                            align: 'left',
                            pickerOptions: {},
                            rangeSeparator: '-',
                            valueFormat: 'yyyy-MM-dd',
                            clearIcon: 'el-icon-xxx',
                            format: 'yyyy-MM-dd',
                            unlinkPanels: false,
                            timeArrowControl: false,
                            action: '',
                            headers: {},
                            data: {},
                            withCredentials: false,
                            showFileList: false,
                            drag: false,
                            accept: '*.jpg,*.png,*.jpeg*',
                            listType: 'text',
                            autoUpload: false,
                            limit: 10,
                            allowHalf: false,
                            lowThreshold: 2,
                            highThreshold: 10,
                            colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
                            voidColor: '#F7BA2A',
                            disabledVoidColor: '#F7BA2A',
                            iconClasses: ['el-icon-xxx', 'el-icon-xxx', 'el-icon-xxx'],
                            voidIconClass: 'el-icon-star-off',
                            disabledVoidIconClass: 'el-icon-star-on',
                            showText: false,
                            texts: ['极差', '失望', '一般', '满意', '惊喜'],
                            showAlpha: false,
                            colorFormat: 'hex',
                            predefine: ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
                            filterPlaceholder: '请输入搜索值',
                            targetOrder: 'original',
                            titles: ['列表 1', '列表 2'],
                            buttonTexts: ['过去', '回来'],
                            emptyText: '没有数据',
                            nodeKey: 'id',
                            renderAfterExpand: true,
                            highlightCurrent: true,
                            defaultExpandAll: false,
                            expandOnClickNode: false,
                            checkOnClickNode: false,
                            autoExpandParent: false,
                            defaultExpandedKeys: [],
                            showCheckbox: true,
                            checkStrictly: true,
                            defaultCheckedKeys: [],
                            currentNodeKey: '',
                            accordion: false,
                            indent: 16,
                            iconClass: 'el-icon-xxx',
                            lazy: false,
                            draggable: false
                        },
                        custom: {
                            initFocus: false,
                            initBlur: false,
                            initSelect: false,
                            loading: false,
                            visibleAsync: true,
                            disabled: true,
                            checkAll: false,
                            checkAllText: '全选',
                            innderHtml: false,
                            leafOnly: false
                        },
                        col: {
                            span: 24,
                            offset: 0,
                            push: 0,
                            pull: 0,
                            xs: 0,
                            sm: 0,
                            md: 0,
                            lg: 0,
                            xl: 0,
                            tag: 'div'
                        },
                        widget: 'input',
                        enum: [],
                        source: {
                            use: false,
                            resPath: 'data',
                            labelKey: 'label',
                            valueKey: 'value',
                            childrenKey: 'children',
                            http: {
                                name: '',
                                url: '',
                                method: 'GET',
                                headers: [
                                    { key: '', value: '' }
                                ],
                                params: [
                                    { key: '', value: '' }
                                ]
                            }
                        }
                    }
                ],
                order: ['name1', 'name2'],
                ui: {
                    inline: false,
                    labelPosition: 'right',
                    labelWidth: '200px',
                    labelSuffix: null,
                    hideRequiredAsterisk: false,
                    showMessage: true,
                    inlineMessage: false,
                    statusIcon: false,
                    validateOnRuleChange: true,
                    size: null,
                    disabled: false
                },
                row: {
                    gutter: 20,
                    type: 'flex',
                    justify: 'start',
                    align: 'top',
                    tag: 'div'
                },
                col: {
                    span: 24,
                    offset: 0,
                    push: 0,
                    pull: 0,
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 0,
                    xl: 0
                }
            }
        }
    },
    created() {
        this.content = JSON.stringify(this.schema, null, 2)
    },
    methods: {
        editorInit(editor) {
            require('brace/ext/language_tools')
            // 设置语言
            require('brace/mode/json')
            require('brace/snippets/json')
            // 设置主题
            require('brace/theme/monokai')
            require('brace/theme/chrome')
            require('brace/theme/crimson_editor')
            editor.setReadOnly(true);
        }
    }
}
</script>

<style lang="scss" scoped>
.sf-schema{
    padding: 20px;
    box-sizing: border-box;
}
.title{
    display: flex;
    align-items: center;
    .title-option{
        margin-left: 20px;
    }
}
.nav{
    max-width: 1200px;
    box-sizing: border-box;
    text-align: right;
    padding: 10px;
    margin: 0 auto;
}
/deep/ table{
    display: table;
    width: 100%;
    td{
        word-break: break-all;
    }
}
</style>
